<template>
  <div class="page p-2">
    <BFCurd
      ref="bfCurd"
      :form="{ template: formState.template! }"
      :table="{ 
        rowKey: 'id',
        columns: tableState.columns!,
        selectRowKeys: tableState.selectKeys!
      }"
      :r="r"
      :c="c"
      :u="u"
      :d="d"
      @page-btn-click="pageBtnClick"
    />
  </div>
</template>

<script setup lang="ts">
import {
  BFCurdExpose,
  BFCurdOperaBtn,
  PageBtnClickCallbackFn,
  PageBtnClickData
} from '@/components/bf-curd/src/bf-curd'
import { ref } from 'vue'
import { Table } from './table.controller'
import { r, c, u, d, tableState, formState, init, TableService } from './table.service'

init()
TableService.getApplicationList()

const bfCurd = ref<BFCurdExpose<Table>>()
let _currentOpera = ''

const pageBtnClick = async (
  btn: BFCurdOperaBtn,
  e: PageBtnClickData<Table>,
  callBack?: PageBtnClickCallbackFn
) => {
  console.log(btn, e)
  switch (btn.opera) {
    case 'add':
      _currentOpera = 'add'
      bfCurd.value?.setFormData({})
      bfCurd.value?.showModal()
      break
    case 'edit': {
      _currentOpera = 'edit'
      bfCurd.value?.setFormData({ ...e.rowData })
      bfCurd.value?.showModal()
      console.log(222)

      break
    }
    case 'filter': {
      bfCurd.value?.showFilter()
      break
    }
    case 'search': {
      bfCurd.value?.setPageInfo(1)
      callBack!('r', e.formdata)
      break
    }
    case 'reset': {
      bfCurd.value?.setPageInfo(1)
      bfCurd.value?.setFilterData({})
      bfCurd.value?.hideFilter()
      callBack!('r')
      break
    }
    case 'bulk-delete':
      callBack!('d', { prompt: '你确定要删除这些应用嘛?', data: e.selectKeys })
      break
    case 'delete':
      callBack!('d', { prompt: '你确定要删除此表吗?', data: [e.rowData?.id] })
      break
    case 'confirm': {
      let action = await callBack!(_currentOpera === 'add' ? 'c' : 'u', { ...e.formdata })
      if (action) {
        bfCurd.value?.hideModal()
      }
      break
    }
  }
}
</script>

<style scoped lang="scss"></style>
